<template>
  <div class="app-container">
    <div class="invitation-filterhead">
      <el-form :inline="true" :model="form" ref="form">
        <el-form-item label="活动名称：" prop="name">
          <el-input
            placeholder="请输入活动名称"
            prefix-icon="el-icon-search"
            v-model="form.name"
            maxlength="20" />
        </el-form-item>
        <el-form-item label="创建时间：" prop="time">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="form.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">筛选</el-button>
          <el-button @click="onCancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div :style="{ display: 'flex', justifyContent: 'flex-end', marginBottom: '10px' }">
      <el-button type="primary" @click="showBigBoxFn()">创建活动</el-button>
    </div>
    <el-table :data="tableData" v-loading="tableLoading">
      <el-table-column label="序号" type="index" :index="indexMethod" />
      <el-table-column prop="id" label="活动ID" />
      <el-table-column prop="name" label="活动名称" />
      <el-table-column label="活动时间">
        <template slot-scope="scope">
          <span>{{ `${scope.row.effectiveTime}~${scope.row.endTime}` }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="updateUser" label="创建人" />
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <!-- 活动状态   0 待启用 1启用 2活动中 3结束 4禁用	 -->
          <span>{{ statusConfig[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-switch
            class="table-switch"
            :value="scope.row.switchStatus"
            :active-value="1"
            :inactive-value="0"
            :disabled="scope.row.status === 4"
            @change="($event) => changeSwitch($event, scope.row)" />
          <el-button @click="viewDetails(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="copyDetails(scope.row)" type="text" size="small">复制</el-button>
          <el-button @click="editDetails(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <InBody v-show="total>0">
      <pagination
        :total="total"
        :page.sync="form.pageNum"
        :limit.sync="form.pageSize"
        @pagination="getTableData" />
    </InBody>
    <!-- 新建/编辑 -->
    <el-dialog title="配置页" :visible.sync="bigBoxStatus" width="1100px" :before-close="bigBoxStatusBefore" destroy-on-close>
      <el-form :inline="true" :model="form2" ref="form2" :rules="rulesforone" class="config_box">
        <el-card class="mt10">
          <el-form-item label="基础信息" />
          <el-row>
            <el-col :span="8">
              <el-form-item label="活动名称：" prop="name">
                <el-input
                  placeholder="请输入活动名称"
                  prefix-icon="el-icon-search"
                  :disabled="editStatus"
                  v-model="form2.name">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14" v-if="!editStatus">
              <el-form-item label="创建时间：" prop="time">
                <el-date-picker
                  size="small"
                  value-format="yyyy-MM-dd"
                  v-model="form2.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="16" v-else>
              <el-form-item prop="time">
                <label>开始时间：</label>
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="form2.time[0]"
                  type="date"
                  :disabled="true"
                  placeholder="开始日期"
                  style="margin-right: 10px;"
                />
                <label>结束时间：</label>
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="form2.time[1]"
                  type="date"
                  placeholder="结束日期"
                  :picker-options="{ disabledDate }"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="mt10">
          <el-form-item label="活动规则" prop="activityRulesArr" class="customizable_form">
            <div v-for="(item, index) in form2.activityRulesArr" :key="index" class="rules-item">
              <span class="user-stairs">阶梯{{ numberToChinese(index + 1) }}：</span>
              <el-row class="user-content" align="middle">
                <el-col :span="8">
                  <el-form-item label="邀请新用户数">
                    <el-input-number
                      v-model="item.inviteNumber"
                      @change="($event) => handleChangeRulesNumber($event, index)"
                      :min="1"
                      :step="1"
                      :disabled="editStatus" /> 人
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="新用户类型">
                    <el-select v-model="item.inviteUserType" placeholder="请选择" :disabled="editStatus">
                      <el-option
                        v-for="item in inviteUserType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="奖励">
                    <el-select v-model="item.rewardCardId" filterable placeholder="请输入券ID" :disabled="editStatus">
                      <el-option
                        v-for="item in couponBatch"
                        :key="item.batchId"
                        :label="`【${item.batchId}】${item.couponName}`"
                        :value="item.batchId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="1.5">
                  <el-button size="mini" type="text" @click="removeRulesFn(index)">- 删除阶梯</el-button>
                </el-col>
              </el-row>
            </div>
            <el-button
            :style="form2.activityRulesArr.length ? {marginTop: '10px'} : {}"
            size="mini"
            type="primary"
            @click="addRulesFn()">+添加阶梯</el-button>
          </el-form-item>
        </el-card>
        <el-card class="mt10">
          <el-form-item label="活动素材" />
          <el-row>
            <el-col :span="12">
              <el-form-item prop="localImageUrl" label="落地页图片">
                <el-upload
                  class="file-uploader"
                  :action="`${baseUrl}/file/upload`"
                  :limit="1"
                  :show-file-list="false"
                  :before-upload="($event) => beforeAvatarUpload($event, 'localImageUrl')"
                  :on-success="($event) => handleFileSuccess($event, 'localImageUrl')">
                  <img v-if="form2.localImageUrl" :src="form2.localImageUrl" class="file" style="width: 375px; height: 375px;">
                  <div class="go-file" v-else>
                    <i class="el-icon-plus file-uploader-icon"></i>
                    点击上传图片
                    （尺寸要求：375*375；大小：10M以内）
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="shareImageUrl" label="海报背景图">
                <el-upload
                  class="file-uploader"
                  :action="`${baseUrl}/file/upload`"
                  :limit="1"
                  :show-file-list="false"
                  :before-upload="($event) => beforeAvatarUpload($event, 'shareImageUrl')"
                  :on-success="($event) => handleFileSuccess($event, 'shareImageUrl')">
                  <img
                    v-if="form2.shareImageUrl"
                    :src="form2.shareImageUrl"
                    class="file"
                    :style="{width: '375px', height: '701px'}">
                  <div class="go-file" v-else>
                    <i class="el-icon-plus file-uploader-icon" />
                    点击上传图片
                    （尺寸要求：375*701；大小：10M以内）
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="shareWechatImageUrl" label="对话框图片">
                <el-upload
                  class="file-uploader"
                  :action="`${baseUrl}/file/upload`"
                  :limit="1"
                  :show-file-list="false"
                  :before-upload="($event) => beforeAvatarUpload($event, 'shareWechatImageUrl')"
                  :on-success="($event) => handleFileSuccess($event, 'shareWechatImageUrl')">
                  <img v-if="form2.shareWechatImageUrl" :src="form2.shareWechatImageUrl" class="file-img" style="width: 375px; height: 300px;">
                  <div class="go-file" v-else>
                    <i class="el-icon-plus file-uploader-icon"></i>
                    点击上传图片
                    （尺寸要求：5:4；大小：10M以内）
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="hrefUrl" label="活动小程序路径：">
                <el-input v-model="form2.hrefUrl" placeholder="请输入文字（20个字以内）" maxlength="20" style="width: 300px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="shareWechatTitle" label="分享至微信对话框标题：">
                <el-input v-model="form2.shareWechatTitle" placeholder="请输入文字（20个字以内）" maxlength="20" style="width: 300px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="ruleContent" label="活动规则：">
                <editor v-model="form2.ruleContent" :min-height="192" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="mt10">
          <el-form-item>
            <el-button
              type="primary"
              @click="onEditSubmitOver('form2')"
              v-loading.fullscreen.lock="bigBoxLoading">提交</el-button>
          </el-form-item>
        </el-card>
      </el-form>
    </el-dialog>
    <!-- 复制条件录入 -->
    <!-- <el-dialog title="复制条件录入" :visible.sync="dialogFormVisible" :before-close="copyBoxStatusBefore" destroy-on-close>
      <el-form
        :model="copyForm"
        :inline="true"
        ref="copyForm"
        :rules="rules"
        style="display: flex; flex-direction: column;">
        <el-form-item label="活动名称" prop="name" style="margin-bottom: 30px;">
          <el-input v-model="copyForm.name" placeholder="活动名称不可重复"/>
        </el-form-item>
        <el-form-item label="活动时间" prop="time" required>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="copyForm.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('copyForm')">重 置</el-button>
        <el-button type="primary" @click="submitForm('copyForm')">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { queryInviteCampaignList,
  queryDetailInviteCampaign,
  addInviteCampaign,
  editInviteCampaign,
  getQueryCouponBatch,
} from '@/api/invite/inviteCampaign';
import { inviteUserType } from '@/constants/inviteCampaign';
import { numberToChinese } from '@/utils/numberToChinese';
import { getBaseUrl } from "@/utils";

export default {
  name: '/activities/invitation/list',
  computed: {
    ...mapGetters(['invitationWithGifts']),
  },
  data() {
    return {
      baseUrl: getBaseUrl(),
      numberToChinese,
      activityNameInput: '',
      pickerValue: '',
      tableData: [],
      tableLoading: false,
      bigBoxLoading: false,
      total: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        time: ''
      },
      statusConfig: ['待启用', '启用', '活动中', '结束', '禁用'],
      bigBoxStatus: false, // 创建新活动、编辑活动 大弹框展示与否
      bigBoxViewStatus: false, // 查看活动
      form2: {
        name: '',
        time: '',
        localImageUrl: '', // 落地页Img
        shareImageUrl: '', // 分享海报
        shareWechatImageUrl: '', // 分享到微信的img
        shareWechatTitle: '', // 分享微信标题 20字
        ruleContent: '', // 活动规则详情 1000字
        activityRulesArr: [], // 活动规则
        hrefUrl: '', // 小程序路径
      },
      selectDataInfo: {}, // 选中的数据
      inviteUserType, // 新建下拉框
      couponBatch: [], // 优惠券
      detail: {}, // 详情
      copyForm: { // 复制的表单
        name: '',
        time: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        time: [
          { required: true, message: '请选择活动时间', trigger: 'blur' },
        ],
      },
      rulesforone: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        time: [
          { required: true, message: '请选择活动时间', trigger: 'blur' },
        ],
        activityRulesArr: [
          { required: true, message: '请添加活动规则', trigger: 'blur' },
        ],
        localImageUrl: [
          { required: true, message: '请上传落地页图片', trigger: 'blur' },
        ],
        shareImageUrl: [
          { required: true, message: '请上传分享海报', trigger: 'blur' },
        ],
        shareWechatImageUrl: [
          { required: true, message: '请上传分享微信图片', trigger: 'blur' },
        ],
        shareWechatTitle: [
          { required: true, message: '请输入分享标题', trigger: 'blur' },
        ],
        hrefUrl: [
          { required: true, message: '请输入小程序路径', trigger: 'blur' },
        ],
        ruleContent: [
          { required: true, message: '请输入活动规则', trigger: 'blur' },
        ]
      },
      dialogFormVisible: false,
      editStatus: false,
      copyStatus: false,
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    async getTableData() {
      this.tableLoading = true
      const { code, rows, total } = await queryInviteCampaignList({
        activeType: 1,
        name: this.form.name,
        pageNum: this.form.pageNum,
        pageSize: this.form.pageSize,
        effectiveTime: this.form.time !== '' ? this.form.time[0] : null,
        endTime: this.form.time !== '' ? this.form.time[1] : null
      })
      if (code !== 200) return;
      this.total = +total
      this.tableData = rows.map(v => ({ ...v, switchStatus: [0, 4].includes(+v.status) ? 0 : 1}))
      this.tableLoading = false
    },
    indexMethod(index) {
      return index + 1;
    },
    disabledDate(time) {
      return (
        time.getTime() < new Date(this.form2.time[1]).getTime()
      );
    },
    onSubmit() {
      this.getTableData()
    },
    onCancel() {
      this.$refs['form'].resetFields();
      this.getTableData()
    },
    copyBoxStatusBefore() {
      this.resetForm('copyForm');
      this.copyForm = {
        name: '',
        time: ''
      }
      this.dialogFormVisible = false;
    },
    changeSwitch(value, item) {
      if(item.status === 4) return this.$message({
        message: '不可再次启动',
        type: 'warning'
      });
      const newStatus = value === 0 ? 4 : 1;
      this.viewDetail(item.id, 'status', newStatus)
    },
    viewDetails(record) {
      this.$router.push({path: '/activities/invitation/detail', query: { id: record.id }})
    },
    // 查看数据
    async viewDetail(id, type, statusN) {
      const { code, data } = await queryDetailInviteCampaign({ id })
      if (code !== 200) return;
      if(type === 'copy') {
        this.selectDataInfo = data;
        // this.dialogFormVisible = true;
        this.form2 = {
          name: data.name,
          time: [data.effectiveTime, data.endTime],
          localImageUrl: data.localImageUrl, // 落地页Img
          shareImageUrl: data.shareImageUrl, // 分享海报
          shareWechatImageUrl: data.shareWechatImageUrl, // 分享到微信的img
          shareWechatTitle: data.shareWechatTitle, // 分享微信标题 20字
          hrefUrl: data.hrefUrl,
          ruleContent: data.ruleContent, // 活动规则详情 1000字
          activityRulesArr: data.rulesList, // 活动规则
        }
        this.copyStatus = true;
        this.bigBoxStatus = true;
      }
      if(type === 'status') {
        this.selectDataInfo = data;
        this.selectDataInfo.switchStatus = statusN;
        return this.editFn(this.selectDataInfo, type)
      }
      if(type === 'edit') { // 只能编辑活动结束时间（只能向后 不能向前）、活动素材图、活动规则文案
        this.form2 = {
          name: data.name,
          time: [data.effectiveTime, data.endTime],
          localImageUrl: data.localImageUrl, // 落地页Img
          shareImageUrl: data.shareImageUrl, // 分享海报
          shareWechatImageUrl: data.shareWechatImageUrl, // 分享到微信的img
          shareWechatTitle: data.shareWechatTitle, // 分享微信标题 20字
          hrefUrl: data.hrefUrl,
          ruleContent: data.ruleContent, // 活动规则详情 1000字
          activityRulesArr: data.rulesList, // 活动规则
        }
        this.editStatus = true;
        this.bigBoxStatus = true;
      }
    },
    copyDetails(record) {
      this.form2 = {
        name: '',
        time: '',
        localImageUrl: '', // 落地页Img
        shareImageUrl: '', // 分享海报
        shareWechatImageUrl: '', // 分享到微信的img
        shareWechatTitle: '', // 分享微信标题 20字
        ruleContent: '', // 活动规则详情 1000字
        activityRulesArr: [], // 活动规则
        hrefUrl: '',
      };
      this.getQueryCouponBatchApi()
      this.viewDetail(record.id, 'copy')
    },
    editDetails(record) {
      this.selectDataInfo = record;
      this.form2 = {
        name: '',
        time: '',
        localImageUrl: '', // 落地页Img
        shareImageUrl: '', // 分享海报
        shareWechatImageUrl: '', // 分享到微信的img
        shareWechatTitle: '', // 分享微信标题 20字
        ruleContent: '', // 活动规则详情 1000字
        activityRulesArr: [], // 活动规则
        hrefUrl: '',
      };
      this.viewDetail(record.id, 'edit')
    },
    showBigBoxFn() {
      this.bigBoxStatus = true;
      Object.assign(this.$data.form2, this.$options.data().form2)
      this.getQueryCouponBatchApi()
    },
    async getQueryCouponBatchApi() {
      const { code, data } = await getQueryCouponBatch({})
      if  (code !== 200) return;
      this.couponBatch = data
    },
    bigBoxStatusBefore() {
      // this.resetForm('form2');
      this.form2 = {
        name: '',
        time: '',
        localImageUrl: '', // 落地页Img
        shareImageUrl: '', // 分享海报
        shareWechatImageUrl: '', // 分享到微信的img
        shareWechatTitle: '', // 分享微信标题 20字
        ruleContent: '', // 活动规则详情 1000字
        activityRulesArr: [], // 活动规则
        hrefUrl: '',
      };
      this.editStatus = false;
      this.bigBoxStatus = false;
    },
    handleChangeRulesNumber(value, index) {
      this.form2.activityRulesArr[index].inviteNumber = value;
    },
    addRulesFn() { // 添加阶梯
      if(this.editStatus) return this.$message({
        message: '不可编辑活动规则',
        type: 'warning'
      });
      this.form2.activityRulesArr.push({
        inviteNumber: null,
        inviteUserType: null,
        rewardCardId: null,
        rewardCardName: null,
      })
    },
    removeRulesFn(index) { // 删除阶梯
      if(this.editStatus) return this.$message({
        message: '不可编辑活动规则',
        type: 'warning'
      });
      this.form2.activityRulesArr.splice(index, 1);
    },
    beforeAvatarUpload(file, type) {
      // const {file} = event;
      console.log(file)
      const typeCheck = /\.(png|jpg|jpeg|svg)$/.test(file.name)
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!typeCheck) {
        this.$message.error(
          '上传图片只支持.png  .jpg  .jpeg .svg格式!'
        )
        return false
      }
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10MB!')
        return false;
      }
      const isSize = new Promise(function(resolve, reject){
        let width = 375;
        let height = type === 'localImageUrl' ? 375 : 701;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function(){
          let valid = null;
          if(['localImageUrl', 'shareImageUrl'].includes(type)) {
            valid = img.width === width && img.height === height;
          } else {
            valid = img.width / 5 ===  img.height / 4;
          }
          valid ? resolve() : reject();
        }
        img.src = _URL.createObjectURL(file);
      }).then(()=>{
        return file;
      }, ()=>{
        if(type === 'localImageUrl') {
          this.$message({ message:'图片尺寸只能是375*375，请您重新选择!', type: 'error' });
        } if(type === 'shareImageUrl') {
          this.$message({
            message:'图片尺寸只能是375*701，请您重新选择!',
            type: 'error'
          });
        } else {
          this.$message({
            message:'图片比例为5:4，请您重新选择!',
            type: 'error'
          });
        }
        return Promise.reject()
      })
      return typeCheck && isLt10M && isSize
    },
    handleFileSuccess(event, type) {
      if(type === 'localImageUrl') {
        this.form2.localImageUrl = event.data.url
      }
      if(type === 'shareImageUrl') {
        this.form2.shareImageUrl = event.data.url
      }
      if(type === 'shareWechatImageUrl') {
        this.form2.shareWechatImageUrl = event.data.url
      }
    },
    onEditSubmitOver(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.bigBoxLoading = true;
          const updatedArray = this.form2.activityRulesArr.map(item => {
              const foundItem = this.couponBatch?.find(originalItem => originalItem.batchId === item.rewardCardId);
              return foundItem ? { ...item, rewardCardName: foundItem.couponName } : item; // 如果找到，则合并对象，否则返回原对象
          });
          const addParameter = {
            activeType: 1,
            ...this.form2,
            effectiveTime: this.form2.time[0],
            endTime: this.form2.time[1],
            rulesList: updatedArray,
          }
          if(this.editStatus) {
            this.$confirm('是否确认编辑活动？')
              .then(_ => this.editFn(addParameter))
              .catch(_ => {
                this.bigBoxLoading = false;
              });
          } else if(this.copyStatus) {
            this.$confirm('是否确认复制本次活动？')
              .then(_ => this.addFn({...this.selectDataInfo, ...this.form2, effectiveTime: this.form2.time[0], endTime: this.form2.time[1], rulesList: updatedArray,}, 'copy'))
              .catch(_ => {
                this.bigBoxLoading = false;
              });
          } else {
            this.$confirm('是否确认创建活动？')
              .then(_ => this.addFn(addParameter, 'add'))
              .catch(_ => {
                this.bigBoxLoading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.goCopy();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goCopy() {
      this.addFn({...this.selectDataInfo, name: this.copyForm.name, effectiveTime: this.copyForm.time[0], endTime: this.copyForm.time[1]}, 'copy');
    },
    // 添加接口
    async addFn(obj, type) {
      const parameter = obj;
      // console.log('parameter', this.$store.getters.userId)
      const { code, data } = await addInviteCampaign({
        id: parameter?.id || null,
        activeType: 1,
        name: parameter.name,
        effectiveTime: parameter.effectiveTime,
        endTime: parameter.endTime,
        localImageUrl: parameter.localImageUrl,
        shareImageUrl: parameter.shareImageUrl,
        shareWechatImageUrl: parameter.shareWechatImageUrl,
        shareWechatTitle: parameter.shareWechatTitle,
        hrefUrl: parameter?.hrefUrl || null,
        ruleContent: parameter.ruleContent,
        status: parameter?.status || null,
        createUser: parameter?.createUser || this.$store.getters.name,
        updateUserId: this.$store.getters.userId,
        updateUser: this.$store.getters.name,
        createdTime: parameter?.createdTime || null,
        updatedTime: parameter?.updatedTime || null,
        rulesList: parameter?.rulesList || null,
        updateRecords: parameter?.updateRecords || null,
      })
      this.bigBoxLoading = false;
      if (code !== 200) return;
      this.dialogFormVisible = false;
      this.bigBoxStatus = false;
      if(type === 'add') {
        this.$message({ message: '创建成功', type: 'success' });
        this.form2 = {
          name: '',
          time: '',
          localImageUrl: '', // 落地页Img
          shareImageUrl: '', // 分享海报
          shareWechatImageUrl: '', // 分享到微信的img
          shareWechatTitle: '', // 分享微信标题 20字
          ruleContent: '', // 活动规则详情 1000字
          activityRulesArr: [],
          hrefUrl: '',
        };
        return this.getTableData();
      }
      if(type === 'copy') {
        // this.form.name = '';
        // this.form.time = '';
        // this.copyForm = {
        //   name: '',
        //   time: ''
        // }
        this.$message({ message: '复制成功', type: 'success' });
        this.form2 = {
          name: '',
          time: '',
          localImageUrl: '', // 落地页Img
          shareImageUrl: '', // 分享海报
          shareWechatImageUrl: '', // 分享到微信的img
          shareWechatTitle: '', // 分享微信标题 20字
          ruleContent: '', // 活动规则详情 1000字
          activityRulesArr: [],
          hrefUrl: '',
        };
        this.getTableData();
      }
    },
    // 编辑接口
    async editFn(obj, type) {
      const parameter = obj;
      const { code } = await editInviteCampaign({
        id: parameter.id || this.selectDataInfo.id,
        activeType: 1,
        name: parameter.name,
        effectiveTime: parameter.effectiveTime,
        endTime: parameter.endTime,
        localImageUrl: parameter.localImageUrl,
        shareImageUrl: parameter.shareImageUrl,
        shareWechatImageUrl: parameter.shareWechatImageUrl,
        shareWechatTitle: parameter.shareWechatTitle,
        hrefUrl: parameter.hrefUrl,
        ruleContent: parameter.ruleContent,
        status: type === 'status' ? parameter.switchStatus : parameter.status,
        createUser: parameter.createUser,
        updateUserId: this.$store.getters.userId,
        updateUser: this.$store.getters.name,
        createdTime: parameter.createdTime,
        updatedTime: parameter.updatedTime,
        rulesList: parameter.rulesList,
        updateRecords: parameter.updateRecords,
      })
      this.bigBoxLoading = false;
      if (code !== 200) return;
      this.bigBoxStatus = false;
      if(type === 'status') return this.getTableData();
      this.$message({ message: '编辑成功', type: 'success' });
      this.form2 = {
        name: '',
        time: '',
        localImageUrl: '', // 落地页Img
        shareImageUrl: '', // 分享海报
        shareWechatImageUrl: '', // 分享到微信的img
        shareWechatTitle: '', // 分享微信标题 20字
        ruleContent: '', // 活动规则详情 1000字
        activityRulesArr: [],
        hrefUrl: '',
      };
      this.copyForm = {
        name: '',
        time: ''
      }
      return this.getTableData();
    }
  }
}
</script>
<style scoped lang="scss">
.table-box {
  .add-activity {
    float: right;
    margin: 10px 0;
  }
}
.table-switch {
  margin-right: 10px;
}
.big-box {
  width: 100%;
  height: 100%;
  background: #fff;
  // position: absolute;
  // top: 0;
  // left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  // padding: 10px;
  // justify-content: center;
  .submint-btn {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .close-box {
    font-size: 20px;
    cursor: pointer;
  }
}
.config_box  {
  .el-card {
    .el-form-item {
      margin-right: 0;
      vertical-align: unset;
    }
  }
}
.customizable_form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .el-form-item__content {
    flex: 1;
  }
}
.customizable_form .el-form-item__content {
  width: 100%;
}
.rules-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 15px;
    .user-content {
      flex: 1;
      display: flex;
      .el-col {
        // flex: 1;
        width: auto;
        margin-left: 10px;
      }
    }
  }
</style>
